<!DOCTYPE html>
<html lang="en">

	<head>
		<title>重庆农气-运行监控子系统</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/fullcalendar.css" />
		<link rel="stylesheet" href="css/matrix-style.css" />
		<link rel="stylesheet" href="css/matrix-media.css" />
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/jquery.gritter.css" />
		<link rel="stylesheet" href="css/monitor.css" />
		<link rel="stylesheet" href="css/box_style.css" />
		<link rel="stylesheet" href="css/index.css" />
		<style>
			body {
				line-height: inherit;
				background: white;
				;
			}
			
			.align-center {
				text-align: center;
			}
			.login{
				margin-top: -65px !important;
			}
		</style>
	</head>

	<body class="container">
		<div class="header">
			<div class="top"></div>
			<ul class="nav">
				<li><a href="index.html">首页</a></li>
				<li><a href="temp.html">气温监测</a></li>
				<li><a href="precipitation.html">降水监测</a></li>
				<li><a href="soil.html">墒情监测</a></li>
				<li><a href="product.html" class="click">产品统计</a></li>
				<li><a href="vip.html">大户分布</a></li>
				<li><a href="farmland.html">农田分布</a></li>
				<li><a href="agrinfo.html">农情分布</a></li>
				<li><a href="expert.html">专家风采</a></li>
				<li><a href="state.html">运行状态</a></li>
			</ul>
			<div class="login">
				<a href="javascript:void(0);" id="login">登录</a>
				<a href="javascript:void(0);" id="exit">退出登录</a>
			</div>
		</div>
		<!--main-container-part-->
		<div id="content">
			<!--breadcrumbs-->
			<div id="content-header">
				<div id="breadcrumb"> <a href="index.html" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 产品统计</a></div>
			</div>

			<div class="row-fluid">
				<div class="span6">
					<div class="widget-box">
						<div class="widget-title bg_ly" data-toggle="collapse" href="#collapseG5"><span class="icon"><i class="icon-chevron-down"></i></span>
							<h5>作物专业服务产品数量</h5>
						</div>
						<div class="widget-content nopadding collapse in" id="collapseG5" >
							<div id="container1" style="width:100%;">
								<canvas id="canvas1"></canvas>
							</div>
						</div>
					</div>
				</div>

				<div class="span6">
					<div class="widget-box">
						<div class="widget-title bg_ly" data-toggle="collapse" href="#collapseG6"><span class="icon"><i class="icon-chevron-down"></i></span>
							<h5>专业服务产品区县分布</h5>
						</div>
						<div class="widget-content nopadding collapse in" id="collapseG6">
							<div id="canvas-holder" style="width:50%; text-align: center;margin: auto;">
								<canvas id="chart-pie" width="300" height="300" />
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				<div class="span12">
					<div class="widget-box">
						<div class="widget-title bg_ly" data-toggle="collapse" href="#collapseG7"><span class="icon"><i class="icon-chevron-down"></i></span>
							<h5>区域专业服务产品数量</h5>
						</div>
						<div class="widget-content nopadding collapse in" id="collapseG7">
							<div id="container2" style="width:100%;">
								<canvas id="canvas2"></canvas>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--Footer-part-->

			<div class="row-fluid">
				<div id="footer" class="span12"> 2016 &copy; 重庆市气象局
					<a href="#"></a>
				</div>
			</div>

			<!--end-Footer-part-->

			<script src="js/excanvas.min.js"></script>
			<script src="js/jquery.min.js"></script>
			<script src="js/jquery.cookie.js"></script>
			<script src="js/jquery.ui.custom.js"></script>
			<script src="js/bootstrap.min.js"></script>

			<script src="js/monitor.js"></script>
			<script src="js/Chart.bundle.js"></script>
			<script src="js/WH.js"></script>
			<script type="text/javascript" src="js/jquery.XYTipsWindow.2.8.js"></script>
			<script src="js/index.js"></script>
			<script type="text/javascript">
				$(document).ready(function() {
				var storage=window.localStorage;
					var storage=window.localStorage;
					if (storage.boolea == 'false') {
						$("#login").show();
						$("#exit").hide();
						$("#login").click(function() {
							$.XYTipsWindow({
								___title: "登录",
								___content: "iframe:login.html",
								___width: "460",
								___height: "150",
								___showbg: true,
								___drag: "___boxTitle"
							});
						});
					} else {
						$("#login").hide();
						$("#exit").show();
						$("#exit").click(function() {
							monitor.loginout();
						});
					}
				})
				var monitor = new Monitor();
				monitor.getProfOfCrop(function(data) {
					//alert(JSON.stringify(data));
					var ys = [];
					var xs = [];
					for (var i = 0; i < data.length; i++) {
						ys.push(data[i]['y']);
						xs.push(data[i]['x']);
					}
					//alert(JSON.stringify(xs));
					var barChartData = {
						labels: xs,
						datasets: [{
							label: '作物专业服务产品数量',
							backgroundColor: "rgba(220,220,220,0.5)",
							data: ys
						}]
					};
					var ctx = document.getElementById("canvas1").getContext("2d");
					window.myBar = new Chart(ctx, {
						type: 'bar',
						data: barChartData,
						options: {
							// Elements options apply to all of the options unless overridden in a dataset
							// In this case, we are setting the border of each bar to be 2px wide and green
							elements: {
								rectangle: {
									borderWidth: 2,
									borderColor: 'rgb(0, 255, 0)',
									borderSkipped: 'bottom'
								}
							},
							responsive: true,
							legend: {
								position: 'top',
							}
						}
					});
				});
				monitor.getProfOfArea(function(data) {
					//alert(JSON.stringify(data));
					var ys = [];
					var xs = [];
					for (var i = 0; i < data.length; i++) {
						ys.push(data[i]['y']);
						xs.push(data[i]['x']);
					}
					//alert(JSON.stringify(xs));
					var barChartData = {
						labels: xs,
						datasets: [{
							label: '作物专业服务产品数量',
							backgroundColor: "rgba(220,220,220,0.5)",
							data: ys
						}]
					};
					var ctx = document.getElementById("canvas2").getContext("2d");
					window.myBar = new Chart(ctx, {
						type: 'bar',
						data: barChartData,
						options: {
							// Elements options apply to all of the options unless overridden in a dataset
							// In this case, we are setting the border of each bar to be 2px wide and green
							elements: {
								rectangle: {
									borderWidth: 2,
									borderColor: 'rgb(0, 255, 0)',
									borderSkipped: 'bottom'
								}
							},
							responsive: true,
							legend: {
								position: 'top',
							}
						}
					});
				});
				//产品大类饼图
				monitor.getProductCount(function(data) {
					//alert(JSON.stringify(data));
					var config = {
						type: 'pie',
						data: {
							datasets: [{
								data: [
									data[0].profproductcount,
									data[0].productcount
								],
								backgroundColor: [
									"#F7464A",
									"#46BFBD"
								],
							}],
							labels: [
								"专业服务产品",
								"决策服务产品"
							]
						},
						options: {
							responsive: true
						}
					};
					var ctx = document.getElementById("chart-pie").getContext("2d");
					window.myPie = new Chart(ctx, config);
				});
			</script>
	</body>

</html>